<template>
  <div v-loading="loading">
    <el-row type="flex" justify="left" :gutter="12" v-if="totalProjectCount !== 0">
      <el-col :span="24">
        <el-card shadow="hover">
          <span slot="header" style="color: #3ba676;">进行中 {{ processingData.count }}/{{ totalProjectCount }}</span>
          <el-progress :text-inside="true" :stroke-width="26" :percentage="processingData.percentage" :color="'#3ba676'"></el-progress>
        </el-card>
      </el-col>
    </el-row>
    <el-row type="flex" justify="left" :gutter="12" v-if="totalProjectCount !== 0">
      <el-col :span="24">
        <el-card shadow="hover">
          <span slot="header" style="color: #e6a23c;">被暂停 {{ pausedData.count }}/{{ totalProjectCount }}</span>
          <el-progress :text-inside="true" :stroke-width="26" :percentage="pausedData.percentage" :color="'#e6a23c'"></el-progress>
        </el-card>
      </el-col>
    </el-row>
    <el-row type="flex" justify="left" :gutter="12" v-if="totalProjectCount !== 0">
      <el-col :span="24">
        <el-card shadow="hover">
          <span slot="header" style="color: #5b5c5c;">已完成 {{ completedData.count }}/{{ totalProjectCount }}</span>
          <el-progress :text-inside="true" :stroke-width="26" :percentage="completedData.percentage" :color="'#5b5c5c'"></el-progress>
        </el-card>
      </el-col>
    </el-row>
    <el-row type="flex" justify="left" :gutter="12" v-if="totalProjectCount !== 0">
      <el-col :span="24">
        <el-card shadow="hover">
          <span slot="header" style="color: #5b5c5c;">状态未知 {{ unknownData.count }}/{{ totalProjectCount }}</span>
          <el-progress :text-inside="true" :stroke-width="26" :percentage="unknownData.percentage" :color="'#5b5c5c'"></el-progress>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getProjects} from '@/api/project'

export default {
  name: 'ProjectOverview',
  data () {
    return {
      projects: [],
      processingCount: 0,
      pausedCount: 0,
      completedCount: 0,
      unknownCount: 0,
      loading: true
    }
  },
  mounted () {
    this.loadData()
  },
  computed: {
    processingData () {
      let prcCount = this.processingCount
      let totalCount = this.totalProjectCount
      return {
        count: prcCount,
        percentage: totalCount === 0 ? totalCount : Math.floor(prcCount * 100.0 / totalCount)
      }
    },
    pausedData () {
      let pasCount = this.pausedCount
      let totalCount = this.totalProjectCount
      return {
        count: pasCount,
        percentage: totalCount === 0 ? totalCount : Math.floor(pasCount * 100.0 / totalCount)
      }
    },
    completedData () {
      let cplCount = this.completedCount
      let totalCount = this.totalProjectCount
      return {
        count: cplCount,
        percentage: totalCount === 0 ? totalCount : Math.floor(cplCount * 100 / totalCount)
      }
    },
    unknownData () {
      let ukCount = this.unknownCount
      let totalCount = this.totalProjectCount
      return {
        count: ukCount,
        percentage: totalCount === 0 ? totalCount : Math.floor(ukCount * 100 / totalCount)
      }
    },
    totalProjectCount () {
      return this.projects.length
    }
  },
  methods: {
    loadData () {
      this.loading = true
      getProjects().then(res => {
        this.projects = res.data
        this.calculateRenderData(this.projects)
        this.loading = false
      }).catch(res => {
        this.$notify.error({
          title: '加载用户项目失败',
          message: res.msg
        })
      })
    },
    calculateRenderData (projects) {
      for (let i = 0; i < projects.length; i++) {
        switch (projects[i].state) {
          case 'PROCESSING':
            this.processingCount++
            break
          case 'PAUSED':
            this.pausedCount++
            break
          case 'COMPLETED':
            this.completedCount++
            break
          default:
            this.unknownCount++
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-card {
  border: 1px solid #d9dce2;
}
</style>
